<template>
  <view class="msg">
    <tui-section title="分项验收信息" is-line background="#f8f8f8"></tui-section>
    <view class='lis'>
      <view class='title'>验收编号</view><text class="row">{{msgList[0]?.branchCode}}</text>
    </view>
    <view class='lis'>
      <view class='title'>单位工程</view><text
        class="row">{{msgList[0]?.unitProjectName+'('+msgList[0]?.subUnitProjectName+')'}}</text>
    </view>
    <view class='lis'>
      <view class='title'>分部工程</view><text
        class="row">{{msgList[0]?.subsectionName+'('+msgList[0]?.tenderSubsectionName+")"}}</text>
    </view>
    <view class='lis'>
      <view class='title'>分项工程</view><text class="row">{{msgList[0]?.branchName}}</text>
    </view>
    <view class='lis'>
      <view class='title'>分项工程数</view><text class="row">{{msgList[0]?.branchQuantity}}</text>
    </view>
    <view class='lis'>
      <view class='title'>检验批数量</view><text class="row">{{msgList[0]?.lotQuantity}}</text>
    </view>
    <view class='lis'>
      <view class='title'>验收日期</view><text
        class="row">{{msgList[0]?.checkStartDate+' 至 '+msgList[0]?.checkEndDate}}</text>
    </view>
    <view class='lis'>
      <view class='title'>备注</view><text class="row">{{msgList[0]?.memo}}</text>
    </view>
    <tui-section title="未分项验收检验批信息" is-line background="#f8f8f8"></tui-section>
    <view class="list" v-for="item in msgList[0]?.projectLotViewRespList" :key="item.projectLotId">
      <view class="listTitle">{{item.lotName}}</view>
      <view class='lot'>【检验批容量】{{item.lotQuantity}}</view>
      <view class='lot'>【检验批部位】{{item.lotPart}}</view>
    </view>
    <!-- </tui-white-space> -->
    <!-- 审批 -->
    <tui-form v-if="approvalRole==='true' && Status === '审批中'" ref="formRef" :show-message="false" :model="formData">
      <tui-section title="审批" is-line background="#f8f8f8"></tui-section>
      <tui-form-item asterisk label="审批结果" prop="isPass">
        <tui-radio-group @change='radioChange'>
          <tui-label v-for="(item,index) in radioItems" :key="index">
            <tui-list-cell>
              <view class="thorui-align__center">
                <tui-radio :checked="item.checked" :value="item.value" color="#07c160" borderColor="#999">
                </tui-radio>
                <text class="tui-text">{{item.name}}</text>
              </view>
            </tui-list-cell>
          </tui-label>
        </tui-radio-group>
      </tui-form-item>
      <tui-form-item asterisk label="审批意见" prop="remark">
        <tui-textarea v-model="formData.remark" placeholder="请输入审批意见"></tui-textarea>
      </tui-form-item>
      <view style="padding:0 10px 10px 10px;">
        <tui-form-button text="审批" @click="submit"></tui-form-button>
      </view>
      
    </tui-form>

    <!-- 审批意见 -->
    <view v-if="Status !== '审批中'" style="margin-bottom: 10px;">
      <tui-section title="审批意见" is-line background="#f8f8f8"></tui-section>
      <view v-if='approvalComment!="null"' style="color:red;padding:20rpx 40rpx">{{approvalComment}}
      </view>
    </view>

    <!-- 审批不通过编辑删除 -->
    <view v-if="approvalRole==='false' && Status === '审批不通过'" class="btn">
      <tui-button style="margin-right: 5px;" @click='reEdit(branchId)'>重新编辑</tui-button>
      <tui-button style="margin-left: 5px;" @click='deleteLot(branchId)'>删除</tui-button>
    </view>

  </view>
</template>

<script setup lang='ts'>
  import {
    reactive,
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    getFullProjectBranchInfoById,
    deleteUnSubProjectBranch,
    completeProjectBranchTask
  } from '@/apis/branch.js'
  const formRef = ref(null);
  let msgList = reactive([])
  const branchId = ref(0)
  const approvalRole = ref(false)
  const Status = ref('')
  const approvalComment = ref('')
  const radioItems = [{
      name: '不通过',
      value: '0',
      checked: true
    },
    {
      name: '通过',
      value: '1',
      checked: false
    }
  ]

  const rules = [{
    name: "remark",
    rule: ["required"],
    msg: ["请输入审批意见"]
  }];
  const formData = ref({
    id: 0,
    isPass: 0,
    remark: "",
  })

  const radioChange = (e) => {
    console.log(e.detail.value);
    formData.value.isPass = +e.detail.value
  }

  const submit = () => {
    if (formRef.value) {
      formRef.value.validate(formData.value, rules, true).then((res) => {
        if (res.isPass) {
          if (formData.value.isPass == 1 || formData.value.isPass == 0 && formData.value.remark.trim() != '') {
            completeProjectBranchTask(formData.value).then(res => {
              if (res.data.code === 200) {
                // plus.nativeUI.toast("审批成功");
                uni.navigateBack()
              }
            })
          }
        } else {
          plus.nativeUI.toast("不通过请输入审批意见");
        }
      })
    }
  }

  onLoad(({
    id,
    flowStatus,
    approval,
    comment
  }) => {
    branchId.value = id
    formData.value.id = +id
    Status.value = flowStatus
    approvalRole.value = approval
    approvalComment.value = comment
    getFullProjectBranchInfoById(id).then(res => {
      msgList.push(res.data.data);
    })
  })

  //删除分项验收
  const deleteLot = (id) => {
    // showConfirm("是否确认删除", () => {})
    //   .then(() => {
        deleteUnSubProjectBranch(id).then(res => {
          if (res.data.code === 200) {
            uni.navigateBack()
          }
        })
      // }).catch(() => {});
  }

  //重新编辑分项验收
  const reEdit = (id) => {
    uni.navigateTo({
      url: `/pages/branch/newBranch?branchId=${branchId.value}`
    })
  }
</script>

<style scoped lang="scss">
  .msg {
    // padding: 20rpx;
    background-color: #ffffff;

    .lis {
      display: flex;
      line-height: 50rpx;
      margin: 10rpx 60rpx;
      color: #7f7f7f;

      .title {
        width: 30%;
      }

      .row {
        width: 70%;
        word-wrap: break-word;
      }
    }

    .list {
      background-color: white;
      padding: 10px 15px;
      border-radius: 10px;

      // margin-bottom: 20px;
      .listTitle {
        color: #4f4f4f;
        font-size: 17px;
        text-indent: 10px;
      }

      .lot {
        margin: 5px 0;
        color: grey;
        font-size: 16px;
        text-indent: 15px;
      }
    }

    .thorui-align__center {
      display: flex;
      align-items: center;
    }

    .tui-text {
      font-size: 30rpx;
      padding-left: 12rpx;
    }

    .btn {
      display: flex;
      justify-content: space-between;
      margin: 0 20rpx;
      padding-bottom: 20rpx;
    }
  }
</style>